<template>
	<div class="crud-container flex-column plr-1 pt-1">
		<cl-tabs-card v-model="activeTab" :tabs="tabs" />
		<cl-flex1 style="overflow: hidden">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<template v-for="tab in tabs">
						<component
							:key="tab.name"
							:is="tab.name"
							v-if="activeTab == tab.name && tab.auth"
						/>
					</template>
				</keep-alive>
			</transition>
		</cl-flex1>
	</div>
</template>

<script>
	import personal from "./personal";
	import deptReport from "./dept-report";
	import depositReport from "./deposit-report";
	import cityReport from "./city-report";
	import storeReport from "./store-report";


	const tabs = [
		{ label: "部门报表", name: "deptReport", auth: "store_onsale_dept_deptreport" },
		{ label: "接定报表", name: "depositReport", auth: "store_onsale_dept_depositreport" },
		{ label: "城市报表", name: "cityReport", auth: "store_onsale_dept_cityreport" },
		{ label: "门店报表", name: "storeReport", auth: "store_onsale_dept_storereport" },
		{ label: "个人报表", name: "personal", auth: "store_clew_supplie_report" }
	];
	export default {
		name: "CusMineEarnestCollect",
		components: {
			personal,
			deptReport,
			depositReport,
			cityReport,
			storeReport
		},
		data() {
			return {
				activeTab: ""
			};
		},
		computed: {
			tabs() {
				return tabs.filter((e) => this.$auth(e.auth));
				// return tabs
			}
		},
		mounted() {
			let tab = this.tabs[0];
			this.activeTab = tab?.name ?? "";
		},
		methods: {
			onLoad({ ctx, app }) {
				ctx.service(this.$service.demo).done();
				app.refresh();
			},
			// crud刷新
			refresh() {
				this.$refs.crud.refresh({ page: 1 });
			}
		}
	};
</script>

<style lang="scss" scoped>
	.crud-container {
		// height: 100%;
		box-sizing: border-box;
		// overflow: hidden;
		background: #fff;
	}
</style>
